<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>变形平移</title>
    <style>
        body{
            background-color: rgb(236,236,236);
        }
        .box1{
            width:200px;
            height:200px;
            background-color: deeppink;
            margin: 0 auto;
            margin-top: 200px;
            /*变形*/
            transform: translateX(100%);
            /* 平移：
            translateX:;
            translateY:;
            translateZ:; */
        }
        /* .box2{
            width:200px;
            height:200px;
            background-color:chartreuse;
            margin:0 auto;  
        } */
        .box3{
            /* width:100px;
            height:100px; */
            background-color: coral;
            position: absolute;
            /*这种居中方式，只适用于元素的大小确定*/
            /* top:0;
            left:0;
            bottom: 0;
            right: 0;
            margin: auto; */
            /*另一种居中方式*/
            top:50%;
            left:50%;
            transform: translateX(-50%) translateY(-50%);
        }
        .box4,.box5{
            width:220px;
            height:300px;
            background-color: #fff;
            float:left;
            margin:0 10px;
            transition: all 1s;
        }
        .box4:hover,.box5:hover{
            transform:translateY(-4px) ; 
            box-shadow: 0 0 10px rgba(0,0,0,.3);  
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <!-- <div class="box3">AAAAAAAAAA</div> -->
    <div class="box4"></div>
    <div class="box5"></div>
    
</body>
</html>